<template>
    <div class="report-detail" v-loading="loading">
        <!-- 游戏举报 -->
        <template v-if="detail.type === 1">
            <topTitle title="游戏举报"/>
            <div class="content-box">
                <div class="content-items">
                    <div class="content-title">游戏名称</div>
                    <div class="content">{{detail.gamename}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">类型</div>
                    <div class="content">{{detail.game.appCategoryName}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">标题</div>
                    <div class="content">{{detail.game.title}}</div>
                </div>
            </div>
        </template>
        <!-- 游戏点评举报 -->
        <template v-else-if="detail.type === 2">
            <topTitle title="游戏点评举报"/>
            <div class="content-box">
                <div class="content-items">
                    <div class="content-title">游戏</div>
                    <div class="content">{{detail.commentGameName}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">1游戏时长</div>
                    <div class="content">{{detail.gamename}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">评分</div>
                    <div class="content">{{detail.gameComment.device}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">点评内容</div>
                    <div class="content">{{detail.gameComment.content}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">点评者</div>
                    <div class="content">{{detail.gameComment.username}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">点评时间</div>
                    <div class="content">{{detail.gameComment.createTime}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">点赞数</div>
                    <div class="content">{{detail.gameComment.thumbsNum}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">打赏数</div>
                    <div class="content">{{detail.gameComment.rewardNum}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">吐槽数</div>
                    <div class="content">{{detail.gameComment.treadNum}}</div>
                </div>
            </div>
        </template>
        <!-- 3游戏点评回复举报  5视频点评举报 6视频点评回复举报 -->
        <template v-else-if="detail.type === 3 || detail.type === 5 || detail.type === 6">
            <topTitle title="游戏点评回复举报" v-if="detail.type === 3"/>
            <topTitle title="视频点评举报" v-if="detail.type === 5"/>
            <topTitle title="视频点评回复举报" v-else/>
            <div class="content-box">
                <div class="content-items">
                    <div class="content-title">点评内容</div>
                    <div class="content">{{detail.reason}}</div>
                </div>
                <div class="content-items">
                    <div class="content-title">点评者</div>
                    <div class="content">{{detail.userName}}</div>
                </div>
                <div class="content-items" v-if="detail.type === 3">
                    <div class="content-title">点评时间</div>
                    <div class="content">{{detail.commentCreateTime}}</div>
                </div>
                <div class="content-items" v-else>
                    <div class="content-title">点评时间</div>
                    <div class="content">{{detail.videoCommentCreateTime | timeNo0}}</div>
                </div>
            </div>
        </template>

        <!-- 视频举报 -->
        <template v-else-if="detail.type === 4">
            <topTitle title="视频举报"/>
        </template>

        <topTitle title="举报条数" :tip="`(${tableData.length}条)`"/>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="bid"
                    label="点评id">
                </el-table-column>
                <el-table-column
                    label="举报类型">
                    <template  slot-scope="scope">
                        <span v-if="scope.row.type === 1">游戏举报</span>
                        <span v-else-if="scope.row.type === 2">游戏点评举报</span>
                        <span v-else-if="scope.row.type === 3">游戏点评回复举报</span>
                        <span v-else-if="scope.row.type === 4">视频举报</span>
                        <span v-else-if="scope.row.type === 5">视频点评举报</span>
                        <span v-else-if="scope.row.type === 6">视频点评回复举报</span>
                        <span v-else-if="scope.row.type === 7">游戏单评论举报</span>
                        <span v-else-if="scope.row.type === 8">游戏单评论回复举报</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="reason"
                    label="举报内容">
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="举报人">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="举报时间">
                </el-table-column>
                <!-- <el-table-column
                    label="游戏时长">
                    <template>
                        <span>none</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="注册时长">
                    <template>
                        <span>none</span>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableData: [],
            detail: {
                type: 1,
                video: {},
                game: {},
                gameComment: {}
            },
            loading: true
        }
    },
    created () {
        // 1 游戏举报   2 游戏点评举报  3 视频举报  4 视频点评举报
        this.getDetail()
    },

    methods: {
        // 获取点评详情
        async getDetail () {
            let params = {
                id: this.$route.query.id
            }
            let res = await this.$http.post('/feedback/feedbackDetail', params)
            if (res.code === '0') {
                this.tableData = res.data.feedbacks || []
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 修改点评状态
        async chagneTalkStatus (item, status) {
            let params = {
                commentId: this.$route.query.id,
                status
            }
            let res = await this.$http.post('/video/updateVideoCommentStatus', params)
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .report-detail {
        padding-top: 10px;

        .content-box {
            .content-items {
                display: flex;
                margin-bottom: 15px;
                .content-title {
                    text-align: right;
                    width: 77px;
                    padding-right: 5px;
                    font-size: 14px;
                    font-weight: 500;
                }
                .content {
                    flex: 1;
                    font-size: 13px;
                }
            }

        }

        .table-box {
            margin-top: 20px;
        }
    }
</style>
